<template>
  <div class="sort-content">
    <!--  导航栏  -->
    <van-row type="flex" align="center" class="title">
      <van-col span="2" @click="gotoBack()">
        <van-icon name="arrow-left" style="padding-left:5px;font-size:18px" />
      </van-col>
      <van-col span="21">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          show-action
          shape="round"
          @search="onSearch"
        >
          <div slot="action" @click="onSearch">搜索</div>
        </van-search>
      </van-col>
    </van-row>

    <!-- 分类选择内容 -->
    <div class="shop-content">
      <div class="shop-select">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="(item,index) in list"
            :key="index"
            :title="item.name"
            v-show="item.isReccomd"
            @click="change"
          />
        </van-sidebar>
      </div>
      <van-loading size="24px" vertical v-if="flag" class="center">加载中...</van-loading>
      <div v-else>
        <div v-for="(item,index) in list" :key="index" v-show="item.isReccomd">
          <div class="shop-main">
            <van-grid :border="false" :column-num="3" v-if="activeKey === index" class="shop-list">
              <van-grid-item v-for="(ite,inde) in listAll" :key="inde">
                <router-link :to="`/list/${ite.productId}`">
                  <div class="shop-items">
                    <div style="  background: #f4f4f4;">
                      <van-image :src="ite.imgUrl" width="120" height="120" />
                    </div>
                    <span class="shop-title">{{ite.masterName}}</span>
                    <span class="shop-price">￥{{ite.minPrice/100}}</span>
                  </div>
                </router-link>
              </van-grid-item>
            </van-grid>
          </div>
        </div>
      </div>
    </div>
    <FootBar></FootBar>
  </div>
</template>

<script>
import FootBar from "@/components/Footer";
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      activeIndex: 0,
      flag: true,
      // items: [{ text: "百果园" }, { text: "时令鲜果" }, { text: "家禽蛋" }],
      list: [],
      listAll: []
    };
  },
  methods: {
    change(value) {
      let id = this.list[value].categoryId;
      this.getAll(id);
    },
    onSearch() {},
    gotoBack() {
      this.$router.go(-1);
    },
    // gotoDetail(id) {
    //   console.log(id);

    //   // this.$router.push("`/list/${}`");
    // },
    getList() {
      let url = "/category/all";
      this.$axios.get(url).then(res => {
        
        // console.log("res", res);
        this.list = res.list;
        this.change(0);
        this.flag = false;
        // console.log("list", this.list);
      });
    },
    getAll(id) {
      let url = "/product/list";
      let data = {
        categoryId: id
      };
      this.$axios
        .post(url, data)
        .then(res => {
          
          this.listAll = res.list;
        })
        .catch(err => {
          console.log("err", err);
        });
    }
  },
  components: {
    FootBar
  },
  created() {
    this.getList();
  }
};
</script>
<style >
body {
  min-height: 100vh;
  /* background: #f4f4f4; */
}
</style>
<style lang="less" scoped>
.center {
  height: 100vh;
  width: 100vw;
  text-align: center;
  position: fixed;
  top: 30%;
  left:10%;
}
.van-grid-item /deep/ .van-grid-item__content {
  // display: flex;
  // width:100px;
  // height: 100px;
  padding: 10px 5px;
  // font-size: 20px;
}
.van-grid-item {
  width: 100%;
  display: felx;
}

// 大div样式
.sort-content {
  height: 100%;

  .title {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 6;
    background: white;
    padding: 0 8px;
    box-sizing: border-box;
    & /deep/ .van-search {
      padding: 8px 0 8px 4px;
      & /deep/ .van-cell {
        padding: 3px 5px;
      }
    }
    & /deep/ .van-col--21 {
      width: 92.5%;
    }
  }
}
.shop-content {
  margin-top: 51px;
  margin-bottom: 50px;
  width: 100%;
  height: 100%;
  // display: flex;
  box-sizing: border-box;
  overflow: hidden;
  .shop-select {
    // overflow-y: scroll;
    min-height: 100vh;
    background: #fafafa;
    width: 25%;
    font-size: 14px;
    position: fixed;
    box-sizing: border-box;
    .van-sidebar {
      width: 100%;
      & /deep/ .van-sidebar-item {
        padding: 12px 12px 10px 8px;
      }
    }
  }
  .shop-main {
    height: 100%;
    width: 100%;
    padding-left: 25%;

    // 选择分类页面的内容
    .shop-list {
      .shop-items {
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
      }
      .shop-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 10em;
        padding: 2px 0px 2px 3px;
        text-align: center;
        display: inline-block;
        height: 22px;
        line-height: 22px;
        width: 100%;
      }
      .shop-price {
        color: #ee0a24;
        text-align: center;
        display: inline-block;
        width: 100%;
        padding-left: 6px;
      }
      .a {
        position: fixed;
        top: 0;
        width: 100%;
      }
    }
  }
}
</style>